/**
 * Created by bestick on 2016/1/13.
 */
$(document).ready(function () {

    //提交问卷按钮状态名
    var STATUS_SUB_TEXT = "建立我的投资计划";
    var STATUS_REDO_TEXT = "重新测试";

    //投资风险问卷调查input选中后的样式
    $('.question-group-input').bind({
        focus: function () {
            $(this).addClass('question-input-onfocus');
        },
        blur: function () {
            $(this).removeClass('question-input-onfocus');
        }
    });

    //age输入
    $('#age').bind('input propertychange', function () {
        $('.question-group-hidden').css('display', ($('#age').val() != '' && $('#term').val() != '') ? 'block' : 'none');
    });

    //期限菜单点击
    $('#term ~ ul li a').click(function () {
        $('#term').val($(this).find('span').html());
        $('.question-group-hidden').css('display', ($('#age').val() != '' && $('#term').val() != '') ? 'block' : 'none');
    });

    //答题弹出菜单点击
    $('.question-group ul li a:not(:first)').click(function () {
        $(this).parents('.question-block').find('input.question-group-input:eq(1)').val($(this).find('span').html());
    })

    //TODO 缓慢滚屏
    $('.question-group-hidden button.btn-invest-risk-submit').click(function () {
        var $btn = $(this);
        if ($btn.find('.btn-loading-text').html() == STATUS_SUB_TEXT) { //点击提交
            //隐藏按钮文字显示菊花
            $btn.addClass('btn-invest-reverse').find('.btn-loading-text').addClass('hidden').next().removeClass('hidden');
            //更改提交后的样式
            $('.question-group-input').each(function () {
                //隐藏小三角
                $(this).nextAll('.glyphicon-chevron-down').addClass('hidden');
                //隐藏当前input并设置span的值
                $(this).addClass('hidden').next('span').html($(this).val());
            });
            setTimeout(function () {
                //更改变显示按钮文字隐藏菊花
                $btn.find('.btn-loading-text').removeClass('hidden').html(STATUS_REDO_TEXT).next().addClass('hidden');
                //显示gap
                $('.gap').fadeIn(function () {
                    //渲染图表
                    $render('#qn-result-temp', '#qn-result', null, initPage);
                    $('#qn-result').slideDown('slow');
                    $('#qn-chart').highcharts().setSize($('#qn-chart').width(),$('#qn-chart').height());
                    setTimeout(function () {
                        //缓慢滚屏
                        $('html body').animate({scrollTop: 886}, 'slow');
                    }, 300);
                });
            }, 1500);
        } else if ($btn.find('.btn-loading-text').html() == STATUS_REDO_TEXT) { //点击重测
            //按钮样式还原并更改按钮文字
            $btn.removeClass('btn-invest-reverse').find('.btn-loading-text').html(STATUS_SUB_TEXT);
            //点击重测后的样式
            $('.question-group-input').each(function () {
                //显示小三角
                $(this).nextAll('.glyphicon-chevron-down').removeClass('hidden');
                //显示当前input并将其后span值置空
                $(this).removeClass('hidden').next('span').html('');
            })
            //缓慢滚屏
            $('html body').animate({scrollTop: 0}, 'slow');
            //隐藏gap
            $('.gap').fadeOut(function () {
                $('#qn-result').slideUp('slow');
            });
        }
    });

    //全部初始化
    function initPage() {
        initSlider();
        initChart();
        initPopover();
    }

    //初始化slider
    function initSlider() {
        $('#jcb-qn-slider').slider();
    }

    //TODO 构建图表
    function initChart() {

        var colors = Highcharts.getOptions().colors,
            categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
            name = 'Browser brands',
            data = [{
                color: colors[1],
                drilldown: {
                    name: 'MSIE versions',
                    categories: ['股票基金'],
                    data: [39.65]
                }
            }, {
                color: colors[0],
                drilldown: {
                    name: 'Firefox versions',
                    categories: ['债券基金'],
                    data: [5.43]
                }
            }, {
                color: colors[8],
                drilldown: {
                    name: 'Chrome versions',
                    categories: ['货币基金'],
                    data: [41.35]
                }
            }, {
                color: colors[3],
                drilldown: {
                    name: 'Safari versions',
                    categories: ['信托'],
                    data: [14.55]
                }
            }, {
                color: colors[4],
                drilldown: {
                    name: 'Opera versions',
                    categories: ['现金'],
                    data: [1.65]
                }
            }];

        // Build the data arrays
        var versionsData = [];
        for (var i = 0; i < data.length; i++) {
            // add version data
            for (var j = 0; j < data[i].drilldown.data.length; j++) {
                var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5;
                versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
                });
            }
        }

        // Create the chart
        $('#qn-chart').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: null
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
                valueSuffix: '%'
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Versions',
                data: versionsData,
                size: '60%',
                innerSize: '80%',
                dataLabels: {
                    formatter: function () {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                    }
                }
            }]
        });
    }

    //TODO 特点
    function initPopover() {
        $('.check-list .check-text').popover();
    }
})